<template>
  <div class="dashboard">
    <!-- 自定义工具栏 -->
    <div class="customization-toolbar" v-if="isEditMode">
      <el-card class="toolbar-card">
        <div class="toolbar-content">
          <div class="toolbar-left">
            <el-icon class="toolbar-icon"><Edit /></el-icon>
            <span class="toolbar-title">自定义模式</span>
          </div>
          <div class="toolbar-right">
            <el-button size="small" @click="showComponentLibrary = true">
              <el-icon><Plus /></el-icon>
              添加组件
            </el-button>
            <el-button size="small" @click="showTemplateSelector = true">
              <el-icon><Document /></el-icon>
              选择模板
            </el-button>
            <el-button size="small" type="success" @click="saveLayout">
              <el-icon><Check /></el-icon>
              保存布局
            </el-button>
            <el-button size="small" type="primary" @click="exitEditMode">
              <el-icon><Close /></el-icon>
              退出编辑
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 编辑模式切换按钮 -->
    <div class="edit-mode-toggle" v-if="!isEditMode">
      <el-button type="primary" size="small" @click="enterEditMode">
        <el-icon><Setting /></el-icon>
        自定义首页
      </el-button>
    </div>

    <!-- 可拖拽的组件容器 -->
    <VueDraggableNext 
      v-model="dashboardComponents" 
      :disabled="!isEditMode"
      item-key="id"
      class="dashboard-container"
      :class="{ 'edit-mode': isEditMode }"
      @change="onComponentsChange"
      :animation="200"
      ghost-class="ghost"
      chosen-class="chosen"
      drag-class="drag"
    >
      <template #item="{ element: component }">
        <div 
          class="dashboard-component"
          :class="{ 
            'edit-mode': isEditMode,
            'hidden': !component.visible 
          }"
          :key="component.id"
        >
          <!-- 组件编辑控制栏 -->
          <div class="component-controls" v-if="isEditMode">
            <div class="controls-left">
              <el-icon class="drag-handle"><Rank /></el-icon>
              <span class="component-title">{{ component.title }}</span>
            </div>
            <div class="controls-right">
              <el-button 
                size="small" 
                text 
                @click="configureComponent(component)"
              >
                <el-icon><Setting /></el-icon>
              </el-button>
              <el-button 
                size="small" 
                text 
                @click="toggleComponentVisibility(component)"
              >
                <el-icon><component :is="component.visible ? 'View' : 'Hide'" /></el-icon>
              </el-button>
              <el-button 
                size="small" 
                text 
                type="danger"
                @click="removeComponent(component)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>

          <!-- 组件内容 -->
          <component 
            :is="getComponentName(component.type)"
            :component-data="component"
            :component-config="component"
            :edit-mode="isEditMode"
            @configure-component="openConfigPanel"
            :style="{
              height: component.height || 'auto',
              backgroundColor: component.style?.backgroundColor,
              borderRadius: component.style?.borderRadius ? `${component.style.borderRadius}px` : '4px'
            }"
          />
        </div>
      </template>
    </VueDraggableNext>

    <!-- 原有的静态内容（当没有自定义组件时显示） -->
    <div v-if="dashboardComponents.length === 0" class="default-dashboard">
      <!-- 欢迎区域 -->
      <div class="welcome-section">
      <el-card class="welcome-card">
        <div class="welcome-content">
          <div class="welcome-text">
            <h2>欢迎回来，{{ userStore.userInfo.name }}！</h2>
            <p>今天是 {{ currentDate }}，祝您工作愉快</p>
          </div>
          <div class="welcome-stats">
            <div class="stat-item">
              <el-icon class="stat-icon"><TrendCharts /></el-icon>
              <div class="stat-info">
                <div class="stat-value">{{ todayStats.sales }}</div>
                <div class="stat-label">今日销售额</div>
              </div>
            </div>
            <div class="stat-item">
              <el-icon class="stat-icon"><Box /></el-icon>
              <div class="stat-info">
                <div class="stat-value">{{ todayStats.orders }}</div>
                <div class="stat-label">今日订单</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据概览 -->
    <div class="overview-section">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" v-for="item in overviewData" :key="item.key">
          <el-card class="overview-card" :class="item.type">
            <div class="overview-content">
              <div class="overview-icon">
                <el-icon><component :is="item.icon" /></el-icon>
              </div>
              <div class="overview-info">
                <div class="overview-value">{{ item.value }}</div>
                <div class="overview-label">{{ item.label }}</div>
                <div class="overview-trend" :class="item.trend">
                  <el-icon><component :is="item.trendIcon" /></el-icon>
                  <span>{{ item.trendText }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表和快捷操作 -->
    <el-row :gutter="20" class="charts-section">
      <!-- 销售趋势图 -->
      <el-col :xs="24" :lg="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <el-button-group size="small">
                <el-button :type="chartPeriod === '7d' ? 'primary' : ''" @click="chartPeriod = '7d'">7天</el-button>
                <el-button :type="chartPeriod === '30d' ? 'primary' : ''" @click="chartPeriod = '30d'">30天</el-button>
                <el-button :type="chartPeriod === '90d' ? 'primary' : ''" @click="chartPeriod = '90d'">90天</el-button>
              </el-button-group>
            </div>
          </template>
          <div ref="salesChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 快捷操作 -->
      <el-col :xs="24" :lg="8">
        <el-card class="quick-actions-card">
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="quick-actions">
            <div 
              v-for="action in quickActions" 
              :key="action.key"
              class="quick-action-item"
              @click="handleQuickAction(action)"
            >
              <div class="action-icon" :class="action.color">
                <el-icon><component :is="action.icon" /></el-icon>
              </div>
              <div class="action-info">
                <div class="action-title">{{ action.title }}</div>
                <div class="action-desc">{{ action.desc }}</div>
              </div>
              <el-icon class="action-arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待办事项和最新动态 -->
    <el-row :gutter="20" class="bottom-section">
      <!-- 待办事项 -->
      <el-col :xs="24" :lg="12">
        <el-card class="todo-card">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-badge :value="todoList.filter(item => !item.completed).length" class="todo-badge" />
            </div>
          </template>
          <div class="todo-list">
            <div 
              v-for="todo in todoList" 
              :key="todo.id"
              class="todo-item"
              :class="{ completed: todo.completed }"
            >
              <el-checkbox 
                v-model="todo.completed" 
                @change="handleTodoChange(todo)"
              />
              <div class="todo-content">
                <div class="todo-title">{{ todo.title }}</div>
                <div class="todo-meta">
                  <span class="todo-priority" :class="todo.priority">{{ todo.priorityText }}</span>
                  <span class="todo-time">{{ todo.time }}</span>
                </div>
              </div>
            </div>
            <div v-if="todoList.length === 0" class="empty-todo">
              <el-icon><Check /></el-icon>
              <span>暂无待办事项</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 最新动态 -->
      <el-col :xs="24" :lg="12">
        <el-card class="activity-card">
          <template #header>
            <span>最新动态</span>
          </template>
          <div class="activity-list">
            <div v-for="activity in activityList" :key="activity.id" class="activity-item">
              <div class="activity-avatar">
                <el-avatar :size="32" :src="activity.avatar">
                  {{ activity.user.charAt(0) }}
                </el-avatar>
              </div>
              <div class="activity-content">
                <div class="activity-text">
                  <strong>{{ activity.user }}</strong> {{ activity.action }}
                </div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
              <div class="activity-type" :class="activity.type">
                <el-icon><component :is="activity.icon" /></el-icon>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row></div>

    <!-- 配置面板 -->
    <ConfigPanel
      v-model="showConfigPanel"
      :component-config="currentConfigComponent"
      @save="saveComponentConfig"
    />
    
    <!-- 模板选择器 -->
    <TemplateSelector
      v-model="showTemplateSelector"
      @apply-template="applyTemplate"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import * as echarts from 'echarts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { VueDraggableNext } from 'vue-draggable-next'

// 导入自定义组件
import WelcomeComponent from '@/components/dashboard/WelcomeComponent.vue'
import OverviewComponent from '@/components/dashboard/OverviewComponent.vue'
import ChartComponent from '@/components/dashboard/ChartComponent.vue'
import QuickActionsComponent from '@/components/dashboard/QuickActionsComponent.vue'
import TodoComponent from '@/components/dashboard/TodoComponent.vue'
import ActivityComponent from '@/components/dashboard/ActivityComponent.vue'
import ConfigPanel from '@/components/dashboard/ConfigPanel.vue'
import TemplateSelector from '@/components/dashboard/TemplateSelector.vue'

const router = useRouter()
const userStore = useUserStore()

// 编辑模式状态
const isEditMode = ref(false)
const showComponentLibrary = ref(false)
const showTemplateSelector = ref(false)
const selectedComponent = ref(null)
const showConfigPanel = ref(false)
const currentConfigComponent = ref(null)

// 仪表盘组件列表
const dashboardComponents = ref([])

// 图表引用
const salesChartRef = ref()
let salesChart = null

// 图表时间周期
const chartPeriod = ref('7d')

// 当前日期
const currentDate = ref('')

// 今日统计
const todayStats = reactive({
  sales: '¥128,560',
  orders: 156
})

// 数据概览
const overviewData = reactive([
  {
    key: 'sales',
    label: '总销售额',
    value: '¥2,458,960',
    icon: 'TrendCharts',
    type: 'primary',
    trend: 'up',
    trendIcon: 'ArrowUp',
    trendText: '+12.5%'
  },
  {
    key: 'orders',
    label: '订单总数',
    value: '3,247',
    icon: 'Box',
    type: 'success',
    trend: 'up',
    trendIcon: 'ArrowUp',
    trendText: '+8.2%'
  },
  {
    key: 'customers',
    label: '客户数量',
    value: '1,856',
    icon: 'User',
    type: 'warning',
    trend: 'up',
    trendIcon: 'ArrowUp',
    trendText: '+5.7%'
  },
  {
    key: 'products',
    label: '商品种类',
    value: '892',
    icon: 'Goods',
    type: 'info',
    trend: 'down',
    trendIcon: 'ArrowDown',
    trendText: '-2.1%'
  }
])

// 快捷操作
const quickActions = reactive([
  {
    key: 'new-order',
    title: '新建订单',
    desc: '创建销售订单',
    icon: 'Plus',
    color: 'primary',
    route: '/sales/orders/create'
  },
  {
    key: 'inventory',
    title: '库存查询',
    desc: '查看商品库存',
    icon: 'Box',
    color: 'success',
    route: '/warehouse/inventory'
  },
  {
    key: 'customer',
    title: '客户管理',
    desc: '管理客户信息',
    icon: 'User',
    color: 'warning',
    route: '/sales/customers'
  },
  {
    key: 'report',
    title: '财务报表',
    desc: '查看财务数据',
    icon: 'Document',
    color: 'info',
    route: '/finance/reports'
  }
])

// 待办事项
const todoList = reactive([
  {
    id: 1,
    title: '审核采购订单 PO-2024-001',
    priority: 'high',
    priorityText: '高',
    time: '2小时前',
    completed: false
  },
  {
    id: 2,
    title: '处理客户退货申请',
    priority: 'medium',
    priorityText: '中',
    time: '4小时前',
    completed: false
  },
  {
    id: 3,
    title: '更新商品价格信息',
    priority: 'low',
    priorityText: '低',
    time: '1天前',
    completed: true
  }
])

// 最新动态
const activityList = reactive([
  {
    id: 1,
    user: '张三',
    action: '创建了新的销售订单',
    time: '5分钟前',
    type: 'success',
    icon: 'Plus',
    avatar: ''
  },
  {
    id: 2,
    user: '李四',
    action: '完成了库存盘点',
    time: '15分钟前',
    type: 'primary',
    icon: 'Check',
    avatar: ''
  },
  {
    id: 3,
    user: '王五',
    action: '更新了客户信息',
    time: '30分钟前',
    type: 'warning',
    icon: 'Edit',
    avatar: ''
  },
  {
    id: 4,
    user: '赵六',
    action: '生成了财务报表',
    time: '1小时前',
    type: 'info',
    icon: 'Document',
    avatar: ''
  }
])

// 初始化销售趋势图
const initSalesChart = () => {
  if (!salesChartRef.value) return
  
  salesChart = echarts.init(salesChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '¥{value}'
      }
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        smooth: true,
        data: [12000, 15000, 18000, 16000, 22000, 25000, 20000],
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
              { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
            ]
          }
        }
      }
    ]
  }
  
  salesChart.setOption(option)
}

// 处理快捷操作
const handleQuickAction = (action) => {
  if (action.route) {
    router.push(action.route)
  } else {
    ElMessage.info(`功能开发中：${action.title}`)
  }
}

// 处理待办事项变更
const handleTodoChange = (todo) => {
  if (todo.completed) {
    ElMessage.success(`已完成：${todo.title}`)
  }
}

// 格式化当前日期
const formatCurrentDate = () => {
  const now = new Date()
  const options = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  }
  currentDate.value = now.toLocaleDateString('zh-CN', options)
}

// 窗口大小变化处理
const handleResize = () => {
  if (salesChart) {
    salesChart.resize()
  }
}

// 组件挂载
onMounted(() => {
  formatCurrentDate()
  
  // 延迟初始化图表，确保DOM已渲染
  setTimeout(() => {
    initSalesChart()
  }, 100)
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 组件映射
const componentMap = {
  WelcomeComponent,
  OverviewComponent,
  ChartComponent,
  QuickActionsComponent,
  TodoComponent,
  ActivityComponent
}

// 编辑模式相关方法
const enterEditMode = () => {
  isEditMode.value = true
  loadSavedLayout()
  ElMessage.success('已进入自定义模式，您可以拖拽调整组件布局')
}

const exitEditMode = () => {
  isEditMode.value = false
  showComponentLibrary.value = false
  showTemplateSelector.value = false
  showConfigPanel.value = false
  ElMessage.info('已退出自定义模式')
}

const saveLayout = () => {
  const layoutData = {
    components: dashboardComponents.value.map((comp, index) => ({
      ...comp,
      order: index,
      config: comp.config || {}
    })),
    timestamp: Date.now()
  }
  localStorage.setItem('dashboard-layout', JSON.stringify(layoutData))
  ElMessage.success('布局已保存')
  console.log('布局已保存:', layoutData)
}

// 打开配置面板
const openConfigPanel = (component) => {
  currentConfigComponent.value = component
  showConfigPanel.value = true
}

// 打开模板选择器
const openTemplateSelector = () => {
  showTemplateSelector.value = true
}

// 应用模板
const applyTemplate = (template) => {
  // 重置当前布局
  dashboardComponents.value = template.layout.map(component => ({
    ...component,
    config: {}
  }))
  
  // 保存新布局
  saveLayout()
  
  showTemplateSelector.value = false
}

// 保存组件配置
const saveComponentConfig = (config) => {
  if (currentConfigComponent.value) {
    const index = dashboardComponents.value.findIndex(
      comp => comp.id === currentConfigComponent.value.id
    )
    if (index !== -1) {
      dashboardComponents.value[index] = {
        ...dashboardComponents.value[index],
        ...config
      }
      saveLayout()
    }
  }
}

const loadSavedLayout = () => {
  const savedLayout = localStorage.getItem('dashboard-layout')
  if (savedLayout) {
    try {
      const layoutData = JSON.parse(savedLayout)
      if (layoutData.components && Array.isArray(layoutData.components)) {
        // 确保所有组件都有必要的属性
        dashboardComponents.value = layoutData.components.map(comp => ({
          ...comp,
          visible: comp.visible !== undefined ? comp.visible : true
        })).sort((a, b) => (a.order || 0) - (b.order || 0))
        console.log('布局已加载:', dashboardComponents.value)
      } else {
        dashboardComponents.value = getDefaultComponents()
      }
    } catch (error) {
      console.error('加载布局失败:', error)
      dashboardComponents.value = getDefaultComponents()
    }
  } else {
    dashboardComponents.value = getDefaultComponents()
  }
}

const getDefaultComponents = () => {
  return [
    {
      id: 'welcome',
      type: 'welcome',
      title: '欢迎区域',
      visible: true,
      config: {
        showStats: true,
        backgroundColor: 'gradient'
      }
    },
    {
      id: 'overview',
      type: 'overview',
      title: '数据概览',
      visible: true,
      config: {
        columns: 4,
        showTrend: true
      }
    },
    {
      id: 'chart',
      type: 'chart',
      title: '销售趋势',
      visible: true,
      config: {
        chartType: 'line',
        period: '7d'
      }
    },
    {
      id: 'quickActions',
      type: 'quickActions',
      title: '快捷操作',
      visible: true,
      config: {
        layout: 'vertical'
      }
    },
    {
      id: 'todo',
      type: 'todo',
      title: '待办事项',
      visible: true,
      config: {
        showCompleted: false
      }
    },
    {
      id: 'activity',
      type: 'activity',
      title: '最新动态',
      visible: true,
      config: {
        maxItems: 5
      }
    }
  ]
}

const getComponentName = (type) => {
  const componentMap = {
    welcome: 'WelcomeComponent',
    overview: 'OverviewComponent',
    chart: 'ChartComponent',
    quickActions: 'QuickActionsComponent',
    todo: 'TodoComponent',
    activity: 'ActivityComponent'
  }
  return componentMap[type] || 'div'
}

const onComponentsChange = () => {
  // 组件顺序变化时的处理
  console.log('组件顺序已更改')
  if (isEditMode.value) {
    saveLayout()
  }
}

const onDragStart = (evt) => {
  console.log('开始拖拽:', evt)
}

const onDragEnd = (evt) => {
  console.log('拖拽结束:', evt)
  // 自动保存布局
  if (isEditMode.value) {
    saveLayout()
  }
}

const configureComponent = (component) => {
  selectedComponent.value = component
  showConfigPanel.value = true
}

const toggleComponentVisibility = (component) => {
  component.visible = !component.visible
  ElMessage.info(`${component.title} ${component.visible ? '已显示' : '已隐藏'}`)
  saveLayout()
}

const removeComponent = async (component) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除 "${component.title}" 组件吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = dashboardComponents.value.findIndex(c => c.id === component.id)
    if (index > -1) {
      dashboardComponents.value.splice(index, 1)
      ElMessage.success('组件已删除')
      saveLayout()
    }
  } catch {
    // 用户取消删除
  }
}

// 组件卸载
onUnmounted(() => {
  if (salesChart) {
    salesChart.dispose()
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 自定义工具栏样式 */
.customization-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 20px;
}

.toolbar-card {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.toolbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-icon {
  color: #409eff;
  font-size: 18px;
}

.toolbar-title {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 编辑模式切换按钮 */
.edit-mode-toggle {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 99;
}

/* 可拖拽容器样式 */
.dashboard-container {
  min-height: 200px;
  transition: all 0.3s ease;
}

.dashboard-container.edit-mode {
  background: rgba(64, 158, 255, 0.02);
  border: 2px dashed rgba(64, 158, 255, 0.3);
  border-radius: 8px;
  padding: 20px;
  position: relative;
}

.dashboard-container.edit-mode::before {
  content: '拖拽组件可调整位置';
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  text-align: center;
  color: #409eff;
  font-size: 14px;
  font-weight: 500;
  background: rgba(64, 158, 255, 0.1);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(64, 158, 255, 0.3);
}

/* 组件样式 */
.dashboard-component {
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
}

.dashboard-component.edit-mode {
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
}

.dashboard-component.edit-mode:hover {
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.05);
}

.dashboard-component.hidden {
  display: none;
}

/* 组件控制栏 */
.component-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(64, 158, 255, 0.1);
  border: 1px solid rgba(64, 158, 255, 0.3);
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 14px;
}

.controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drag-handle {
  cursor: move;
  color: #409eff;
}

.component-title {
  font-weight: 500;
  color: #409eff;
}

.controls-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 拖拽样式 */
:deep(.ghost) {
  opacity: 0.5;
  background: #f0f9ff;
  border: 2px dashed #409eff;
  transform: rotate(2deg);
}

:deep(.chosen) {
  opacity: 0.8;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
  z-index: 999;
}

:deep(.drag) {
  opacity: 0.9;
  transform: rotate(1deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 默认仪表盘样式 */
.default-dashboard {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 欢迎区域 */
.welcome-section {
  margin-bottom: 20px;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

.welcome-card :deep(.el-card__body) {
  padding: 24px;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: bold;
}

.welcome-text p {
  margin: 0;
  opacity: 0.9;
}

.welcome-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon {
  font-size: 24px;
  opacity: 0.8;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

/* 数据概览 */
.overview-section {
  margin-bottom: 20px;
}

.overview-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.overview-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.overview-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.overview-card.primary .overview-icon {
  background: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.overview-card.success .overview-icon {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.overview-card.warning .overview-icon {
  background: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.overview-card.info .overview-icon {
  background: rgba(144, 147, 153, 0.1);
  color: #909399;
}

.overview-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.overview-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.overview-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.overview-trend.up {
  color: #67C23A;
}

.overview-trend.down {
  color: #F56C6C;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-container {
  height: 320px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 快捷操作 */
.quick-actions-card {
  height: 400px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-action-item:hover {
  border-color: #409EFF;
  background: rgba(64, 158, 255, 0.05);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.action-icon.primary {
  background: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.action-icon.success {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.action-icon.warning {
  background: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.action-icon.info {
  background: rgba(144, 147, 153, 0.1);
  color: #909399;
}

.action-info {
  flex: 1;
}

.action-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 12px;
  color: #909399;
}

.action-arrow {
  color: #c0c4cc;
}

/* 底部区域 */
.bottom-section {
  margin-bottom: 20px;
}

/* 待办事项 */
.todo-card {
  height: 400px;
}

.todo-badge {
  margin-left: 8px;
}

.todo-list {
  max-height: 320px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item.completed {
  opacity: 0.6;
}

.todo-item.completed .todo-title {
  text-decoration: line-through;
}

.todo-content {
  flex: 1;
}

.todo-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.todo-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.todo-priority {
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
}

.todo-priority.high {
  background: #F56C6C;
}

.todo-priority.medium {
  background: #E6A23C;
}

.todo-priority.low {
  background: #909399;
}

.todo-time {
  color: #909399;
}

.empty-todo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
  gap: 8px;
}

/* 最新动态 */
.activity-card {
  height: 400px;
}

.activity-list {
  max-height: 320px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  flex: 1;
}

.activity-text {
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

.activity-type {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.activity-type.success {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.activity-type.primary {
  background: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.activity-type.warning {
  background: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.activity-type.info {
  background: rgba(144, 147, 153, 0.1);
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard {
    padding: 12px;
  }
  
  .welcome-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .welcome-stats {
    gap: 16px;
  }
  
  .overview-content {
    flex-direction: column;
    text-align: center;
  }
  
  .chart-card,
  .quick-actions-card,
  .todo-card,
  .activity-card {
    height: auto;
    margin-bottom: 16px;
  }
  
  .chart-container {
    height: 250px;
  }
}
</style>